今天一樣來研究 pure-admin-thin 專案

拆解外框

先試著找到首頁路由檔案將 Layout 註解看會發生什麼事情

//\pure-admin-thin\src\router\modules\home.ts
import { $t } from "/@/plugins/i18n";
import type { RouteConfigsTable } from "/#/index";
// const Layout = () => import("/@/layout/index.vue");

const homeRouter: RouteConfigsTable = {
  path: "/",
  name: "Home",
  // component: Layout,
  redirect: "/welcome",
  meta: {
    icon: "home-filled",
    title: $t("menus.hshome"),
    rank: 0
  },
  children: [
    {
      path: "/welcome",
      name: "Welcome",
      component: () => import("/@/views/welcome/index.vue"),
      meta: {
        title: $t("menus.hshome")
      }
    }
  ]
};

export default homeRouter;

結果圖:

外框直接消失 只剩下內容了
朝著這個方向鑽研就會找到 src 資料夾下面有 layout

分析組件架構

主檔案 \pure-admin-thin\src\layout\index.vue
圖解

進一步細分

• sidebar 側邊欄位
• navbar 導航欄位
• tag 標籤(分頁)欄位
• appMain 主內容

navbar 又可分成

總結

再看一次資料夾結構就了解了

剛開始看比較複雜後來看到下面這段就懂作者在做什麼了

//`\pure-admin-thin\src\layout\index.vue`
//第111行 設定三種狀態的導航欄模式
//vertical mix horizontal

const layoutHeader = defineComponent({
  render() {
    return h(
      "div",
      {
        class: { "fixed-header": set.fixedHeader },
        style: [
          set.hideTabs && layout.value.includes("horizontal")
            ? isDark.value
              ? "box-shadow: 0 1px 4px #0d0d0d"
              : "box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08)"
            : ""
        ]
      },
      {
        default: () => [
          !pureSetting.hiddenSideBar &&
          (layout.value.includes("vertical") || layout.value.includes("mix"))
            ? h(navbar)
            : h("div"),
          !pureSetting.hiddenSideBar && layout.value.includes("horizontal")
            ? h(Horizontal)
            : h("div"),
          h(
            tag,
            {},
            {
              default: () => [
                h(
                  "span",
                  {
                    onClick: onFullScreen
                  },
                  {
                    default: () => [
                      !pureSetting.hiddenSideBar
                        ? h(fullScreen, { class: "dark:text-white" })
                        : h(exitScreen, { class: "dark:text-white" })
                    ]
                  }
                )
              ]
            }
          )
        ]
      }
    );
  }
});

補充

在\pure-admin-thin\src\layout\index.vue有引入appMain組件
底下語法卻是用 app-main 兩者通用但是閱讀上不太友善!